<template>
  <div class="level-dialog">
    <transition name="fade">
      <div class="lay-mask"
           v-show="visible"
           @click="closeDialog()"></div>
    </transition>
    <transition
      @beforeEnter="beforeEnter"
      name="fade">
      <div class="lay-box tc"
           v-show="visible"
           :style="{'margin-top': -content.height/2 + 15 + 'px','margin-left': -content.width/2 + 'px'}"
           ref="layBox">
        <p class="lay-close" @click="closeDialog()"></p>
        <div class="lay-bg">
          <p class="tit">{{info.tit}}</p>
          <p>{{info.text}}</p>
          <button v-if="info.link" @click="goVideo(info.link)" class="btn">{{info.btn}}</button>
          <button v-else class="btn">{{info.btn}}</button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
  export default {
    name: 'record_dialog',
    data () {
      return {
        content: {}
      }
    },
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      type: {
        type: String,
        required: true
      }
    },
    computed: {
      info () {
        let obj = {}
        if (this.type === 'submit') {
          obj.tit = '提交成功'
          obj.text = '提交成功！即刻安排发货，请耐心等待！'
          obj.btn = '确定'
        } else if (this.type === 'get') {
          obj.tit = '领取成功'
          obj.text = '领取成功，请在我的奖品里面查看，领取的优惠券可以在微店里面使用'
          obj.btn = '确定'
          obj.link = ''
        } else if (this.type === 'notimes') {
          obj.tit = ''
          obj.text = '您的抽奖次数用完了！T^T'
          obj.btn = '继续观看视频'
          obj.link = 'https://www.baidu.com'
        }
        console.log(obj)
        return obj
      }
    },
    watch: {
      'visible': function () {
        this.bodyOverflow()
      }
    },
    methods: {
      goVideo (link) {
        this.closeDialog()
        window.location.href = link
      },
      beforeEnter () {
        this.updatePosition()
      },
      updatePosition () {
        if (this.showFlag || this.isTransed) return
        this.$nextTick(() => {
          this.showFlag = true
          this.isTransed = true
          // 计算宽高 修补定位到中心
          let _layBox = $(this.$refs.layBox)
          this.$set(this.$data, 'content', {
            width: _layBox.outerWidth(true),
            height: _layBox.outerHeight(true)
          })
        })
      },
      closeDialog () {
        this.$emit('update:visible', false)
      },
      bodyOverflow () {
        if (this.visible) {
          $('body').css('overflow', 'hidden')
        } else {
          $('body').css('overflow', 'auto')
        }
      }
    }
  }
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .level-dialog{
    .lay-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 999;
      background-color: rgba(0,0,0,.65);
    }
    .lay-box {
      width: 90%;
      max-width: 320px;
      height: auto;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 1000;
      background: #FFED5D;
      border-radius: 10px;
      .lay-close{
        position:absolute;
        right:15px;
        top:15px;
        width:20px;
        height:20px;
        background:url("../assets/imgs/close_white.png");
        background-size:contain;
        }
      .lay-bg{
        background:url("../assets/imgs/prize_bg.png") no-repeat center;
        background-size:cover;
        padding:40px 15px;
        color:#F45502;
        .tit{
          font-size:20px;
          margin-bottom:15px;
          }
        img{
          width:45%;
          margin: 30px 0;
          }
        }
      .btn{
        font-family:'Microsoft yahei',serif ;
        background:#F56006;
        color:#FFF03A;
        border:none;
        border-radius:30px;
        text-align:center;
        padding:10px 50px;
        font-size:17px;
        margin-bottom:10px;
        margin-top: 30px;
        outline:none;
        }
    }
  }
</style>
